<template>
  <div>
    <div class="date-select">
      <el-text tag="b" size="large">支付渠道</el-text>
    </div>
    <div id="barChart" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import type { EChartsOption } from "@/config/echarts";
import {echarts} from "@/config/echarts";
import type { paymentMethodRankingRes } from "@/types/index";
interface Props {
  data: paymentMethodRankingRes;
}
const propsData = defineProps<Props>();
watch(propsData, (newval) => {
  var chartDom = document.getElementById("barChart")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  window.addEventListener("resize", function () {
    myChart.resize(); //跟随浏览器改变尺寸
  });
  const colors = ["#FFB801", "#9CD200", "#12A0D0", "#1F9B98", "#E78DE5"];
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: 0,
      right: 30,
      bottom: 5,
      top: 20,
      containLabel: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
    },
    yAxis: {
      type: "category",
      data: newval.data.paymentMethod,
    },
    series: [
      {
        type: "bar",
        data: newval.data.quantity.map((value, index) => ({
          value,
          itemStyle: {
            color: colors[index],
          },
        })),
        barWidth: 18,
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
.date-select {
  display: flex;
  align-items: center;
  height: 32px;
}
</style>
